<template>
  <div class="rune">
    <input
      class="input"
      v-model="keywords"
      type="text"
      placeholder="请输入您要搜索的海克斯符文"
      @input="handleSearchInput"
    />

    <!-- 海克斯列表 -->
    <div class="list">
      <div 
        class="item" 
        :title="item.name" 
        v-for="item in runes"
        :key="item.id"
        @click="goToRuneDetail(item.id)"
      >
        <!-- 使用后端返回的图片URL -->
        <img v-if="item.img" :src="item.img" :alt="item.name" />
        <img v-else src="../assets/default_rune.png" :alt="item.name" />
        <div class="name">{{ item.name }}</div>
        <!-- 海克斯信息弹窗 -->
        <el-tooltip
          :content="item.effect"
          raw-content
        >
          <div class="mask">
            <img src="../assets/search.png" />
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import request from '@/utils/request'

const router = useRouter();

const state = reactive({
  runes: [],
  keywords: "",
});

// 获取所有符文
const fetchRunes = async () => {
  try {
    const response = await request({
      url: '/rune',
      method: 'get'
    });
    state.runes = response;
  } catch (error) {
    console.error('获取符文列表失败:', error);
  }
};

// 搜索符文
const searchRunes = async () => {
  if (!state.keywords.trim()) {
    fetchRunes();
    return;
  }
  
  try {
    const response = await request({
      url: '/rune/search',
      method: 'get',
      params: { keyword: state.keywords.trim() }
    });
    state.runes = response;
  } catch (error) {
    console.error('搜索符文失败:', error);
  }
};

// 防抖搜索处理
let searchTimer = null;
const handleSearchInput = () => {
  clearTimeout(searchTimer);
  searchTimer = setTimeout(() => {
    searchRunes();
  }, 300);
};

// 跳转到符文详情页
const goToRuneDetail = (id) => {
  router.push({ path: '/runedetail', query: { id: id } });
};

onMounted(() => {
  fetchRunes();
});

const { runes, keywords } = toRefs(state);
</script>

<style lang="less" scoped>
.rune {
  position: relative;
  min-height: 100vh;
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
  
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/heard(2).png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.3;
    z-index: -1;
  }
  
  .input {
    height: 40px;
    width: 250px;
    padding: 0 15px;
    border: 2px solid #00a383;
    border-radius: 20px;
    font-size: 16px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
  }

  .list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    
    .item {
      position: relative;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px;
      
      img {
        width: 100px;
        height: 100px;
        border-radius: 0;
        border: 2px solid #00a383;
      }
      
      .name {
        margin-top: 8px;
        color: #333;
        font-size: 20px;
        font-weight: 600;
      }
      
      &:hover {
        .mask {
          display: block;
        }
        .name {
          color: white;
        }
      }
      
      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 40px;
        background: #00a383;
        opacity: 0.8;
        
        img {
          width: 20px;
          height: 20px;
          margin-top: 50%;
          margin-left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
</style>
